<template>
    <div class="flex flex-col w-80">
                    <div class="flex justify-center items-center">
                        <n-icon-wrapper color="#FFFFFF" :size="70" :border-radius="50">
                        <n-icon :component="get_icon(conf.icon)" class="flex justify-center items-center" :size="50"
                            :color="conf.color">
                        </n-icon> </n-icon-wrapper>
                    </div>
                    
                    <div class="mt-2 flex justify-center items-center font-bold">{{ conf.title }}</div>
                    <div class="mb-2 flex justify-center items-center">{{ conf.introduction }}</div>
                    <div class="flex justify-center items-center"><n-button class="w-32" @click="goto(conf.url)" :color="conf.color" type="primary">{{ conf.buttontext }}</n-button>
</div>
                </div>
</template>
<script setup>
import { InsertPhotoFilled} from '@vicons/material';
import { ArrowTrendingLines20Regular,BrainCircuit20Regular } from '@vicons/fluent';
import { useRouter } from 'vue-router';
const router = useRouter();


const props = defineProps(['conf'])

const goto = function(url){
    router.replace({
        path:'/'+url
    });
}

function get_icon(params) {
    if(params=='InsertPhotoFilled'){
        return InsertPhotoFilled;
    }
    if(params=='ArrowTrendingLines20Regular'){
        return ArrowTrendingLines20Regular;
    }
    if(params == 'BrainCircuit20Regular'){
        return BrainCircuit20Regular;
    }
}

</script>